<template>
  <div>
    <el-row>
      <el-col :span="20">
        <h2>首页</h2>
      </el-col>
      <el-col :span="4">
        <div v-html="loginInfo"></div>
        <router-link to="/shopCart">查看购物车</router-link>
        <router-link to="/shopOrder">我的订单</router-link>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="2">
        订单状态：
      </el-col>
      <el-col :span="4">
        <el-input v-model="paramObj.status"></el-input>
      </el-col>
      <el-col :span="2">
        下单起始日期：
      </el-col>
      <el-col :span="4">
        <el-input v-model="paramObj.startDate"></el-input>
      </el-col>
      <el-col :span="2">
        下单结束日期：
      </el-col>
      <el-col :span="4">
        <el-input v-model="paramObj.endDate"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="findByItem(1)">查询</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8" v-for=" p in cutObj.records" :key="p.id">
        <img :src="'/project/img/'+ p.imgPath" width="300" height="300"><br>
        <div>{{ p.name }}</div>
        <div>单价：{{ p.price }}</div>
        <div>已售出数量：{{ p.salesNum }}</div>
        <el-button type="success" @click="addCart(p.id)">购买</el-button>
        <el-button type="primary" @click="findById(p.id)">查看</el-button>
      </el-col>
    </el-row>

    <el-pagination
        v-model:currentPage="cutObj.current"
        v-model:page-size="cutObj.size"
        background
        layout="prev,pager, next,jumper"
        :total="cutObj.total"
        @current-change="findByItem(cutObj.current)"
    />


  </div>
</template>

<script>
import axios from "axios"

export default {
  data() {
    return {
      loginInfo: "",
      paramObj: {},
      cutObj: {},
    }
  },
  created() {
    this.getLoginInfo();
    this.findByItem(1);
  },
  methods: {
    getLoginInfo() {
      axios.get("/project/user/getLoginInfo").then(resp => {
        var info = resp.data;
        if (info == "") {
          this.loginInfo = "你好，请先<a href='/shopLogin'>登录</a>"
        } else {
          this.loginInfo = "欢迎光临" + info.userName;
        }
      })
    },
    findByItem(pageNO) {
      this.paramObj.pageNO = pageNO;
      axios.get("/project/product/cutByItem", {params: this.paramObj}).then(resp => {
        this.cutObj = resp.data;
      })
    },
    findById(productId) {
        this.$router.push({name:"SingleProduct",query:{productId:productId}});
    },
    addCart(productId) {
      axios.get("/project/cart/addCart", {params: {productId}}).then(resp => {
        if (resp.data == "ok") {
          this.$router.push("/shopCart");
        }
      })
    },


  }
}

</script>

<style scoped>

</style>